<template>
  <el-dialog
    v-el-drag-dialog
    title="异常详情"
    :visible.sync="visible"
    width="800px"
    :append-to-body="true"
    :destroy-on-close="true"
  >
    <lb-table
      ref="lbTable"
      border
      highlight-current-row
      element-loading-text="加载中"
      :data="tableData.data"
      :column="tableData.column"
      show-summary
      :summary-method="getSummaries"
      :immediate-fetch="false"
      :pagination="false"
      :max-height="300"
    />
  </el-dialog>
</template>

<script>
  import { queryStockOutBillBottle } from '@/api'
  import { formatColumnMap } from '@/utils'
  export default {
    components: {

    },
    props: {
      gdStatusMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        visible: false,
        tableData: {
          column: [
            {
              prop: 'goodsName',
              label: '商品名称',
              minWidth: 80,
              showOverflowTooltip: true
            },
            {
              prop: 'gdStatus',
              label: '状态',
              minWidth: 55,
              render: (h, { row }) => <span>{row.gdStatus && formatColumnMap(this.gdStatusMap, 'value', row.gdStatus, 'desc') }</span>
            },
            {
              prop: 'bottleCount',
              label: '异常数量',
              minWidth: 50
            },
            {
              prop: 'bottleCode',
              label: '条码信息',
              minWidth: 100,
              render: (h, { row }) => <div style='white-space: initial !important;'>{row.bottleCode}</div>
              // render: (h, { row }) => {
              //   let names = []
              //   if (row.bottleCode && row.bottleCode.indexOf('、') === -1) {
              //     names = [row.bottleCode]
              //   }
              //   if (row.bottleCode && row.bottleCode.indexOf(',') > -1) {
              //     names = row.bottleCode.split(',')
              //   }
              //   return h('div', names.map(function(item, index) {
              //     return h('span', {
              //       domProps: {
              //         innerHTML: `${item}<br/>`
              //       }})
              //   }))
              // }
            }
          ],
          data: []
        },
        scanCodeInfo: {}
      }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(temp) {
        return new Promise(async(resolve) => {
          this.resolve = resolve
          if (temp) {
            this.resolve = resolve
            const res = await queryStockOutBillBottle({
              billCode: temp.stockInCode,
              goodsId: temp.goodsId || '',
              gdStatus: temp.gdStatus,
              type: 2
            })
            if (res.data) {
              this.tableData.data = res.data
            }
          }
          this.visible = true
        })
      },
      // 合计
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 1 || index === 3) {
            sums[index] = ''
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          } else {
            sums[index] = '合计'
          }
        })
        return sums
      }
    }
  }
</script>

<style lang='scss' scoped>
</style>
